<template>
  <div class="content">
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">数据查询</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">仓库数据</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="query">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item
          v-for="(item, index) in wareData"
          :key="index"
          :index="item.name"
          >{{ item.name }}</el-menu-item
        >
      </el-menu>
      <div class="title">
        <span
          class="queryCommodity"
          @click="selectQueryClick(1)"
          :style="{ color: selectQuery === 2 ? '#666' : '#2d7edf' }"
          >查询商品</span
        ><span
          class="queryGift"
          @click="selectQueryClick(2)"
          :style="{ color: selectQuery === 1 ? '#666' : '#2d7edf' }"
          >查询赠品</span
        >
      </div>
      <el-form ref="form" :model="queryForm" label-width="80px">
        <el-form-item class="formItem" label="产品名称">
          <el-input
            placeholder="请输入产品名称"
            v-model="queryForm.info"
          ></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="选择品牌">
          <el-select
            clearable
            v-model="queryForm.service"
            placeholder="请选择品牌"
          >
            <el-option
              v-for="item in brand"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="formItem" label="商品厂家">
          <el-input
            placeholder="请输入商品厂家"
            v-model="queryForm.vender"
          ></el-input>
        </el-form-item>
        <el-form-item class="formItem" label="时间">
          <el-date-picker
            style="width: 200px"
            size="mini"
            clearable
            v-model="queryForm.date"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="primary"
          @click="onSubmit"
          >搜索商品</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="mini"
          type="warning"
          @click="onReset"
          >重置</el-button
        >
      </el-form>
    </div>
    <div class="total">
      <el-row>
        <el-col :span="6"
          ><div class="left">
            <div class="title"><span>仓库数据</span></div>
            <div class="context">
              <div class="border">
                <span style="color: red; font-size: 18px; font-weight: 500">
                  {{ tableData.stocks ? tableData.stocks : 0 }}
                </span>
                <span>仓库总库存</span>
              </div>
              <div class="border">
                <span style="color: red; font-size: 18px; font-weight: 500">
                  {{ tableData.outStocks ? tableData.outStocks : 0 }}
                </span>
                <span>仓库出库数据</span>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="18"
          ><div class="right">
            <div class="title">品牌数据</div>
            <div class="context">
              <div class="border" v-for="item in tableData.brand">
                <span style="color: red; font-size: 18px; font-weight: 500">
                  {{ item.number }}
                </span>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>

    <el-table
      v-if="tableData.commoditys"
      :header-cell-style="{ color: '#2E7EDF' }"
      :data="tableData.commoditys.list"
      style="width: 100%"
    >
      <el-table-column label="商品图片" width="180">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="img(scope.row.image)"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="商品名称" width="228">
      </el-table-column>
      <el-table-column prop="brandId" label="商品品牌" width="180">
      </el-table-column>
      <el-table-column prop="sellPrice" label="商品单价" width="180">
      </el-table-column>
      <el-table-column prop="ranking" label="出库排行" width="180">
      </el-table-column>
      <el-table-column sortable prop="number" label="出库总数" width="180">
      </el-table-column>
      <el-table-column prop="price" label="出库总额" width="180">
      </el-table-column>
      <el-table-column prop="quantityStock" label="库存" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            v-if="parArray.indexOf('wareFixCode') != -1"
            @click="updateDetail(scope.row)"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="queryDetail(scope.row.id)"
            >查看详细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
      title="调整仓库"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="仓库数量">
          <el-input-number
            v-model="form.quantityStock"
            placeholder="请输入仓库数量"
            :max="form.quantityStockTemp"
          ></el-input-number>
        </el-form-item>
        <el-form-item style="display: flex; justify-content: flex-end">
          <el-button type="primary" @click="addStorage">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="page">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :current-page="currentPage1"
          :page-size="selectSizePage"
          layout="total,sizes,prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="!tableData.commoditys ? 0 : tableData.commoditys.totalNum"
        >
        </el-pagination>
      </div>
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      queryForm: {
        info: "",
        date: [],
      },
      height: "500px",
      activeIndex: "A仓",
      currentPage1: 1,
      dialogFormVisible: false,
      wareData: [],
      tableData: [],
      brand: [],
      selectQuery: 1,
      tempQk: 0,
      form: {},
      limits: "",
      parArray: [],
      selectSizePage: 10,
    };
  },
  activated () {
    // this.tableHeight();
  },
  created () {
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === "warehouseData"
    );
    if (params[0]) {
      params[0].buttonList.forEach((item) => {
        this.parArray.push(item.code);
      });
    }
    // 权限设定判断

    this.listData();
  },
  methods: {
    handleSizeChange (e) {
      this.selectSizePage = e;
      this.listData();
    },
    addStorage () {
      this.axios
        .post("/order/warehouseCom/updateInventory", {
          comId: this.form.id,
          quantityStock: this.form.quantityStock,
          warId: this.wareData.find((e) => e.name == this.activeIndex).id,
          comType: this.selectQuery,
        })
        .then((res) => {
          if (!res.code) {
            this.$message.success("申请成功");
          } else {
            this.$message.warning(res.message);
          }
          this.dialogFormVisible = false;
        });
    },
    updateDetail (e) {
      this.dialogFormVisible = true;
      this.form = e;
      this.form.quantityStockTemp = e.quantityStock;
    },
    tableHeight () {
      let self = this;
      setTimeout(() => {
        let ph = document.documentElement.clientHeight;
        self.height =
          ph -
          (450 + document.getElementsByClassName("el-form")[0].clientHeight) +
          "px";
      }, 1500);
      window.onresize = function () {
        let ph = document.documentElement.clientHeight;
        self.height =
          ph -
          (450 + document.getElementsByClassName("el-form")[0].clientHeight) +
          "px";
      };
    },
    queryDetail (e) {
      this.$router.push({
        path: "productDataDetails",
        query: {
          warId: this.wareData.find((v) => v.name === this.activeIndex).id,
          cId: e,
          type: this.selectQuery,
        },
      });
    },
    onSubmit () {
      this.currentPage1 = 1;
      this.pageSize = 10;
      this.listData();
    },
    img (img) {
      return this.ImgHttps + img;
    },
    handleSelect (e) {
      this.activeIndex = e;
      let tempId = this.wareData.find((v) => v.name === e).id;
      this.listData(tempId);
      this.$forceUpdate();
    },
    handleCurrentChange (e) {
      this.listData();
    },
    selectQueryClick (e) {
      this.selectQuery = e;
      this.listData();
    },
    onReset () {
      this.$set(this.queryForm, "info", "");
      this.$set(this.queryForm, "date", []);
      this.$set(this.queryForm, "service", "");
      this.$set(this.queryForm, "vender", "");
      this.listData();
    },
    listData (e) {
      if (!this.wareData.length) {
        this.axios
          .get("/order/comm/commodity/selectCommWarehouse?")
          .then((res) => {
            if (res.data) {
              this.wareData = res.data;
            }
            if (res.data && res.data[0].name === this.activeIndex) {
              this.activeIndex = res.data[0].name;
            }
            let temp = this.wareData.find((v) => v.name === this.activeIndex);
            this.axios
              .post(
                "/order/warehouseCom/statisticsWar",
                {
                  brandId: this.queryForm.service,
                  pageNo: this.currentPage1,
                  pageSize: this.selectSizePage,
                  startTime: this.queryForm.date ? this.queryForm.date[0] : "",
                  endTime: this.queryForm.date ? this.queryForm.date[1] : "",
                  title: this.queryForm.info,
                  vender: this.queryForm.vender,
                  warId: !e ? (temp ? temp.id : "") + "" : e + "",
                  type: this.selectQuery,
                },
                {
                  timeout: 30000,
                }
              )
              .then((res) => {
                this.tableData = res.data
                  ? res.data
                  : {
                    brand: [],
                    commoditys: {
                      list: [],
                      pageNo: 1,
                      totalNum: 0,
                      totalPage: 0,
                    },
                    outStocks: 0,
                    stocks: 0,
                  };
                if (res.data) {
                  this.currentPage1 = res.data.commoditys.pageNo;
                }
              });
          });
        this.axios.get("/order/comm/commodity/selectList").then((res) => {
          this.brand = res.data;
        });
      } else {
        let temp = this.wareData.find((v) => v.name === this.activeIndex);
        this.axios
          .post(
            "/order/warehouseCom/statisticsWar",
            {
              brandId: this.queryForm.service,
              pageNo: this.currentPage1,
              pageSize: this.selectSizePage,
              startTime: this.queryForm.date ? this.queryForm.date[0] : "",
              endTime: this.queryForm.date ? this.queryForm.date[1] : "",
              title: this.queryForm.info,
              vender: this.queryForm.vender,
              warId: !e ? (temp ? temp.id : "") + "" : e + "",
              type: this.selectQuery,
            },
            {
              timeout: 30000,
            }
          )
          .then((res) => {
            this.tableData = res.data
              ? res.data
              : {
                brand: [],
                commoditys: {
                  list: [],
                  pageNo: 1,
                  totalNum: 0,
                  totalPage: 0,
                },
                outStocks: 0,
                stocks: 0,
              };
            if (res.data) {
              this.currentPage1 = res.data.commoditys.pageNo;
            }
          });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
span {
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
}
.queryCommodity:hover {
  color: #2664af;
  cursor: pointer;
}
.queryGift:hover {
  color: #2664af;
  cursor: pointer;
}
.queryGift {
  color: #2664af;
  cursor: pointer;
  margin-left: 20px;
}
.content {
  font-size: 15px;
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }
  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }
  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
  .div1 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb2.png);
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #2d7edf;
  }
  .div2 {
    margin-left: -16px;
    background: url(../../../../assets/breadcrumb1.png);
    width: 110px;
    font-size: 13px;
    padding-left: 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
  }
  .query {
    background: #fff;
    padding: 10px 20px;
    .title {
      border-bottom: 1px solid #eee;
      padding-bottom: 5px;
      color: #2d7edf;
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .formItem {
      display: inline-block;
      margin-right: 20px;
    }
    /deep/.el-input > input {
      height: 30px;
      width: 150px;
    }
  }
  .total {
    margin-top: 10px;
    margin-bottom: 10px;
    .left {
      padding: 10px 20px;
      line-height: 30px;
      background: #fff;
      border-right: 10px solid #f5f5f5;
      .context {
        display: flex;
        justify-content: space-between;
        .border {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    }
    .right {
      padding: 10px 20px;
      line-height: 30px;
      height: 90px;
      background: #fff;
      .context {
        display: flex;
        justify-content: space-between;
        &:before,
        &:after {
          content: "";
          display: block;
        }
        .border {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
    }
  }
  .tableData {
    background: #fff;
    padding: 10px 20px;
    margin-top: 10px;
  }
  .page {
    text-align: right;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: -33px;
    background: #eee;
    z-index: 200;
    span {
      font-size: 15px;
      color: #666;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
    }
    .el-pagination {
      display: inline-block;
      vertical-align: middle;
    }
  }
}
</style>
